<table class="table-form">
    <colgroup>
        <col width="150px"><col>
    </colgroup>
    <tbody>
    <tr>
        <th>商品名称：</th>
        <td>
            <div class="form-group has-feedback no-margin">
                <input id="title" name="title" value="{$goods.title}" class="input-sm Lwidth400 form-control" type="text" required="true"  maxlength="50">
            </div>
        </td>
    </tr>

    <tr>
        <th>是否上架：</th>
        <td>
            <input name="status" type="radio" {if $goods.status eq 2}checked{/if} value="2" id="un_status">
            <label for="un_status">下架</label>
            <input name="status" type="radio" value="1" {if $goods.status eq 1}checked{/if} id="up_status" style="margin-left: 10px;">
            <label for="up_status">上架</label>
        </td>
    </tr>

    <tr>
        <th>商品推荐度：</th>
        <td>
            <select name="re_degree">
                <option value="1" {if $goods.re_degree eq 1}selected{/if}>1星</option>
                <option value="2" {if $goods.re_degree eq 2}selected{/if}>2星</option>
                <option value="3" {if $goods.re_degree eq 3}selected{/if}>3星</option>
                <option value="4" {if $goods.re_degree eq 4}selected{/if}>4星</option>
                <option value="5" {if $goods.re_degree eq 5}selected{/if}>5星</option>
            </select>
        </td>
    </tr>

    <tr>
        <th>基本数据：</th>
        <td>
            <table class="table table-bordered table-hover table-border">
                <thead>
                <tr>
                    <th class="base">库存</th>
                    <th class="base">市场价格</th>
                    <th class="base">销售价格</th>
                    <th class="base">成本价格</th>
                    <th class="base">总利润</th>
                    <th class="base">重量(克)</th>
                </tr>
                </thead>
                <tbody>
                <tr class="base">
                    <input type="hidden" name="_product_id[]" value="{$product.pid}"/>
                    <td class="base">
                        <div class="form-group has-feedback no-margin">
                            <input class="input-xs Lwidth80" type="text" name="_num[]" value="{$product.num}" maxlength="10">
                        </div>
                    </td>
                    <td class="base">
                        <div class="form-group has-feedback no-margin">
                            <input class="input-xs Lwidth80" type="text" name="_price_old[]" value="{$product.price_old}" pattern="float" required="true" maxlength="10">
                        </div>
                    </td>
                    <td class="base">
                        <div class="form-group has-feedback no-margin">
                            <input class="input-xs Lwidth80" type="text" name="_price_new[]" value="{$product.price_new}" pattern="float" required="true" maxlength="10">
                        </div>
                    </td>
                    <td class="base">
                        <div class="form-group has-feedback no-margin">
                            <input class="input-xs Lwidth80" type="text" name="_purchase_price[]" value="{$product.purchase_price}" pattern="float" maxlength="10">
                        </div>
                    </td>
                    <td class="base">
                        <div class="form-group has-feedback no-margin">
                            <input class="input-xs Lwidth80" type="text" name="_profit[]" value="{$product.profit}" pattern="float" maxlength="10">
                        </div>
                    </td>
                    <td class="base">
                        <div class="form-group has-feedback no-margin">
                            <input class="input-xs Lwidth80" type="text" name="_weight[]" value="{$product.weight}" pattern="int" maxlength="10">
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <th>商品规格：</th>
        <td>
            <a class="btn btn-success btn-sm pull-left no-radius" href="javascript:void(0);" id="addSpec" data-status="true">
                <i class="fa fa-plus"></i>
                添加规格
            </a>
            <span class="note margin-left-10 pull-left margin-top-4">可以生成不同组合参数的货品，比如：尺码xxl+红色+长袖 衣服</span>
        </td>
    </tr>
    <tr>
        <th>计量单位显示：</th>
        <td>
            <div class="form-group has-feedback no-margin">
                <select name="unit" id="unit" class="form-control Lwidth100">
                    {foreach from=$unitList item=item}
                        <option value="{$item}" {if $goods.unit eq $item}selected{/if}>{$item}</option>
                    {/foreach}
                </select>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<script>
    var goods_base = $('.table-border').find('tbody tr.base');
    function init() {
        var products = {$products|json_encode};
        console.log(products);
        if(!products.length) return;
        var head = products[0];
        if(head.spec_list){
            for(var i in products)
                products[i].spec_list = JSON.parse(products[i].spec_list);
            var table = $('.table-border');
            var thead = table.find('thead');
            var tbody = table.find('tbody');
            thead.find('tr').append('<th class="spec">默认</th>');
            thead.find('tr').append('<th class="spec">操作</th>');
            tbody.find('tr.base').remove();
            for(var i in head.spec_list){
                var spec = JSON.parse(head.spec_list[i]);
                var tmp = $('<th class="spec">' + spec.name + '</th>');
                tmp.data('id',spec.id)
                    .data('name',spec.name);
                thead.find('tr').prepend(tmp);
            }

            $.each(products,function(index){
                var spec = this.spec_list;
                var base_tr = goods_base.find('td').clone().removeAttr('class');

                var td = $('<td></td>');
                td.append('<div class="checkbox no-margin"></div>');
                td.find('div').append('<label class="no-padding-left"></label>');
                var _checkbox = $('<input type="checkbox" name="_default" value="' + index + '" class="inverted"/>');
                td.find('div > label').append(_checkbox);
                td.find('div > label').append('<span class="text margin-left-4"></span>');
                //base_tr.after(td);
                //base_tr.after('<td><a href="javascript:void(0);" class="btn btn-danger btn-xs shiny icon-only white btn-del">删除</a></td>');

                var tr = $('<tr class="spec" data-id="' + this.pid + '"></tr>');
                tr.append('<input type="hidden" name="_product_id[]" value="' + this.pid + '"/>');
                tr.append(base_tr);
                tr.append(td);
                tr.append('<td><a href="javascript:void(0);" class="btn btn-danger btn-xs shiny icon-only white btn-del">删除</a></td>');


                tr.find('input[name="_num[]"]').val(this.num);
                tr.find('input[name="_price_old[]"]').val(this.price_old);
                tr.find('input[name="_price_new[]"]').val(this.price_new);
                tr.find('input[name="_purchase_price[]"]').val(this.purchase_price);
                tr.find('input[name="_profit[]"]').val(this.profit);
                tr.find('input[name="_weight[]"]').val(this.weight);
                for(var i=0;i<spec.length;i++){
                    tr.prepend('<td></td>');
                }
                for(var i in spec){
                    var arr = JSON.parse(spec[i]);
                    tr.find('td:eq('+i+')')
                        .html("<input type='hidden' class='_spec_list' value='" + spec[i] + "' name='_spec_list[" + index + "][]'/>" + arr.value);
                }
                if(this.is_default == 1){
                    tr.find('input[type=checkbox]').attr('checked','checked');
                }

                tbody.append(tr);
            });
        }
    }
    init();
</script>
{literal}
    <script>
        $(function(){
            $('#addSpec').click(function(){
                var len = $('._spec_list').length;
                if(len > 0){
                    layer.msg('重新设置规格需删除当前规格列表');
                    return;
                }
                $.dialog({
                    id : 'setSpec',
                    title : '设置商品规格',
                    async : false,
                    min_width: 600,
                    min_height: 350,
                    content : function(){
                        var content;
                        $.post("/goods/specSet",function(data){
                            content = data;
                        });
                        return content;
                    },
                    ok : function(target){
                        var spec = [];
                        var table = $('.table-border');
                        var thead = table.find('thead');
                        var tbody = table.find('tbody');
                        var tabs_spec = $(target).find('.tabs-spec-name li');
                        if(tabs_spec.length){
                            tabs_spec.each(function(index){
                                var id = $(this).data('id');
                                var name = $(this).data('name');
                                spec[index] = [];
                                var tr = $(target).find('div[data-id='+id+']').find('table > tbody > tr');
                                if(tr.length > 0){
                                    tr.each(function(i){
                                        spec[index][i] = $(this).data('value');
                                    });
                                    spec[index]['name'] = name;
                                    spec[index]['id'] = id;
                                }else{
                                    spec.pop();
                                }
                            });

                            var spec_depth = spec.length;
                            if(spec_depth > 0){

                                if(goods_base == ''){
                                    goods_base = tbody.find('tr.base');
                                }
                                tbody.find('tr.base').remove();

                                var th = table.find('thead > tr');
                                var _spec = [];
                                $.each(spec,function(i){
                                    var tmp = $('<th class="spec">' + this.name + '</th>');
                                    tmp.data('id',this.id)
                                        .data('name',this.name);
                                    _spec[i] = {};
                                    _spec[i].id = this.id;
                                    _spec[i].name = this.name;;
                                    th.prepend(tmp);
                                    delete this.name;
                                    delete this.id;
                                });

                                th.append('<th class="spec">默认</th>');
                                th.append('<th class="spec">操作</th>');

                                var spec_list = Zuhe(spec);

                                for(var i in spec_list){

                                    var tr = $('<tr class="spec"></tr>');
                                    var list = spec_list[i].split(',');
                                    for(var l in list){
                                        var td = $('<td data-value="' + list[l] + '">' + list[l] + '</td>');
                                        tr.append(td);
                                        var index = td.index();
                                        var _input = _spec[index];
                                        _input.value = list[l];
                                        td.append("<input type='hidden' class='_spec_list' value='" + JSON.stringify(_input) + "' name='_spec_list[" + i + "][]'/>");
                                    }

                                    var base_tr = goods_base.find('td').clone().removeAttr('class');
                                    base_tr.find('.has-error').removeClass('has-error');
                                    tr.append(base_tr);

                                    var td = $('<td></td>');
                                    td.append('<div class="checkbox no-margin"></div>');
                                    td.find('div').append('<label class="no-padding-left"></label>');

                                    var _checkbox = $('<input type="checkbox" name="_default" value="' + i + '" class="inverted" />');
                                    if(i == 0) _checkbox.attr('checked',true);
                                    td.find('div > label').append(_checkbox);

                                    td.find('div > label').append('<span class="text margin-left-4"></span>');

                                    tr.append(td);

                                    tr.append('<td><a href="javascript:void(0);" class="btn btn-danger btn-xs shiny icon-only white btn-del">删除</a></td>');
                                    tbody.append(tr);
                                }

                                $('#addSpec').data('status',false);

                                tbody.find('input[name="_default"]').click(function(){
                                    if(this.checked === false){
                                        if(tbody.find('input[name="_default"]:checked').length <= 0){
                                            this.checked = true;
                                        }
                                    }else{
                                        var checkbox = tbody.find('input[name="_default"]:checked');
                                        if(checkbox.length > 0){
                                            checkbox.attr('checked',false);
                                        }
                                        this.checked = true;
                                    }
                                });

                                /*tbody.find('.btn-del').click(function(){
                                    var spec_td = $(this).closest('tbody').find('tr.spec');
                                    if(spec_td.length == 1){
                                        th.find('th.spec').remove();
                                        tbody.html(goods_base);
                                        $('#addSpec').data('status',true);
                                    }else{
                                        var tr = $(this).closest('tr');
                                        var checkbox = tr.find('input[type="checkbox"]').get(0);
                                        if(checkbox.checked == true){
                                            tr.remove();
                                            tbody.find('tr:first-child').find('input[type="checkbox"]').attr('checked',true);
                                        }
                                    }
                                });*/
                            }
                        }
                    }
                });
            });
            $(document).on('click','.btn-del',function () {
                if(confirm('确定删除？')){
                    var thead = $(this).closest('.table').find('thead');
                    var tbody = $(this).closest('tbody');
                    var spec_td = tbody.find('tr.spec');
                    if(spec_td.length == 1){
                        thead.find('th.spec').remove();
                        tbody.html(goods_base).find('input[name="_product_id[]"]').remove();
                        $('#addSpec').data('status',true);
                    }else{
                        var tr = $(this).closest('tr');
                        var checkbox = tr.find('input[type="checkbox"]').get(0);
                        if(checkbox.checked == true){
                            tr.remove();
                            tbody.find('tr:first-child').find('input[type="checkbox"]').attr('checked',true);
                        }
                    }
                }
            });
        });
        //接受可变长数组参数，具体看下面的测试代码
        function Zuhe(spec){
            var heads=spec[0];
            for(var i=1,len=spec.length;i<len;i++){
                heads=addNewType(heads,spec[i]);
            }
            return heads;
        }

        //在原有组合结果的基础上添加一种新的规格
        function addNewType(heads,choices){
            var result=[];
            for(var i=0,len=heads.length;i<len;i++){
                for(var j=0,lenj=choices.length;j<lenj;j++){
                    result.push(heads[i]+','+choices[j]);
                }
            }
            return result;
        }
    </script>
{/literal}